<div class="container mt-4">
  <div class="row">
    <!-- 个人信息卡片 -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">个人信息</h5>
          <div class="user-info">
            <p><strong>用户名：</strong>{{ user?.username }}</p>
            <p><strong>邮箱：</strong>{{ user?.email }}</p>
            <p><strong>注册时间：</strong>{{ user?.createdAt | date:'yyyy-MM-dd' }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息卡片 -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">统计信息</h5>
          <div class="stats-info">
            <p><strong>提交次数：</strong>{{ user?.submissionCount || 0 }}</p>
            <p><strong>通过题目：</strong>{{ user?.acceptedCount || 0 }}</p>
            <p><strong>通过率：</strong>{{ (user?.acceptedCount / user?.submissionCount * 100) | number:'1.1-1' }}%</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码卡片 -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">修改密码</h5>
          <form [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
              <label for="currentPassword">当前密码</label>
              <input type="password" class="form-control" id="currentPassword"
                     formControlName="currentPassword"
                     [ngClass]="{ 'is-invalid': submitted && f['currentPassword'].errors }">
              <div *ngIf="submitted && f['currentPassword'].errors" class="invalid-feedback">
                <div *ngIf="f['currentPassword'].errors['required']">请输入当前密码</div>
              </div>
            </div>

            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" class="form-control" id="newPassword"
                     formControlName="newPassword"
                     [ngClass]="{ 'is-invalid': submitted && f['newPassword'].errors }">
              <div *ngIf="submitted && f['newPassword'].errors" class="invalid-feedback">
                <div *ngIf="f['newPassword'].errors['required']">请输入新密码</div>
                <div *ngIf="f['newPassword'].errors['minlength']">密码至少需要6个字符</div>
              </div>
            </div>

            <div class="form-group">
              <label for="confirmPassword">确认新密码</label>
              <input type="password" class="form-control" id="confirmPassword"
                     formControlName="confirmPassword"
                     [ngClass]="{ 'is-invalid': submitted && f['confirmPassword'].errors }">
              <div *ngIf="submitted && f['confirmPassword'].errors" class="invalid-feedback">
                <div *ngIf="f['confirmPassword'].errors['required']">请确认新密码</div>
              </div>
            </div>

            <button type="submit" class="btn btn-primary" [disabled]="loading">
              <span *ngIf="!loading">修改密码</span>
              <span *ngIf="loading" class="spinner-border spinner-border-sm"></span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 提交历史 -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">最近提交</h5>
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>提交时间</th>
                  <th>题目</th>
                  <th>语言</th>
                  <th>状态</th>
                  <th>运行时间</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let submission of user?.recentSubmissions || []">
                  <td>{{ submission.submittedAt | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                  <td>{{ submission.problemTitle }}</td>
                  <td>{{ submission.language }}</td>
                  <td>
                    <span [class]="'badge ' + (submission.status === 'Accepted' ? 'badge-success' : 'badge-danger')">
                      {{ submission.status }}
                    </span>
                  </td>
                  <td>{{ submission.runtime }}ms</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 